<template>
  <div class="blogCategory-container" v-loading="isLoading">
    <h2>文章分类</h2>
    <RightList :list="list" @select="handleChangeSelect"></RightList>
  </div>
</template>

<script>
import RightList from "./RightList";
import { getBlogTypes } from "@/api/blog";
import fetchData from "@/mixins/fetchData";
export default {
  mixins: [fetchData([])],
  components: {
    RightList,
  },
  computed: {
    list() {
      let totalCount = 0;
      for (let i = 0; i < this.data.length; i++) {
        totalCount += this.data[i].articleCount;
      }
      const result = [
        {
          name: "全部",
          aside: `${totalCount}篇`,
          id: -1,
          articleCount: totalCount,
        },
        ...this.data,
      ];

      const res = result.map((item) => ({
        ...item,
        isSelected: this.categoryId === item.id,
        aside: `${item.articleCount}篇`,
      }));
      console.log(res);
      return res;
    },
    limit() {
      return this.$route.query.limit || 10;
    },
    categoryId() {
      return this.$route.params.categoryId || -1;
    },
  },
  created() {
    console.log(this.$route.params);
  },
  methods: {
    async fetchData() {
      return await getBlogTypes();
    },
    handleChangeSelect(item) {
      const query = {
        page: 1,
        limit: this.limit,
      };
      if (item.id == -1) {
        this.$router.push({
          name: "Blog",
          query,
        });
      } else {
        this.$router.push({
          name: "BlogCategory",
          query,
          params: {
            categoryId: item.id,
          },
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.blogCategory-container {
  width: 300px;
  height: 100%;
  padding: 20px;
  position: relative;
  box-sizing: border-box;
  h2 {
    margin: 0;
    font-size: 1.2em;
  }
}
</style>